<template>
  <div class="w-1200px m-auto">
    <el-row>
      <el-col
        :span="8"
        v-for="item in props.list"
        :key="item"
        class="text-center cursor-pointer hover-text-#bb0615"
        @click="go_play(item.id)"
      >
        <div>
          <img
            v-if="item.header_img"
            ref="bannerImg"
            class="img w-334px h-255px"
            :src="item.header_img"
          />
          <img
            v-else
            class="w-223px w-334px h-255px"
            src="@/assets/images/moren.jpg"
            alt=""
          />
        </div>
        <div class="w-340px mb-40px mx-30px px-20px py-10px shadow">
          <p class="text-left mb-10px text-20px font-600">
            {{ item.title }}
          </p>
          <p class="text-left">
            <span class="text-#bb0615 text-18px font-600 mr-20px">¥9.9</span>
            <del class="text-16px text-#bfbfbf">¥180</del>
          </p>
          <p class="text-left text-15px mt-5px pb-12px text-#bfbfbf">
            {{ item.clicks }}次观看
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, defineProps } from "vue";
import { useRouter } from "vue-router";

const props = defineProps(["list"]);
const $router = useRouter();
const number = ref(0);
const form = reactive({
  keyword: "",
  type: "",
  page: 1,
  page_size: 10,
});

const go_play = (id) => {
  $router.push(`/search/play3?id=${id}`);
};
// 分页处理
const handleCurrentChange = (val: number) => {
  form.page = val;
  // get_question_list()
  document.querySelector("html").scrollTop = 0;
};
</script>

<style scoped>
.shadow {
  background-color: #fbfbfb;
  box-shadow: 10px 10px 5px #eee;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
</style>
